<template>
    <div id="alipay">
        <label for="">金额：</label>
        <el-input style="width:100px;" type="text" v-model="price"></el-input>
        <el-button @click="prcode">支付</el-button>
        <el-button @click="query">查询支付状态</el-button>
        <div>
            <canvas id="QRCode_header"></canvas>
        </div>
        <p>{{id}}</p>
    </div>
</template>

<script>
export default {
    data () {
        return {
            // 金额
            price: '',
            QRCodeMsg: '',
            // 订单号
            id: ''
        }
    },
    methods: {
        // 生成二维码
        prcode () {
            this.$axios.get('http://127.0.0.1:8082/Alipay/qrcode',{
                params: {
                    price: this.price
                }
            }).then(res => {
                console.log(res.data.obj.body)
                this.id = res.data.obj.ranNum
                let opts = {
                    errorCorrectionLevel: "H",//容错级别
                    type: "image/png",//生成的二维码类型
                    quality: 0.3,//二维码质量
                    margin: 12,//二维码留白边距
                    width: 200,//宽
                    height: 180,//高
                    color: {
                        dark: "#333333",//前景色
                        light: "#fff"//背景色
                    }
                };
                this.QRCodeMsg = res.data.obj.QrCode; //生成的二维码为URL地址js
                let msg = document.getElementById("QRCode_header");
                // 将获取到的数据（val）画到msg（canvas）上
                this.$QRCode.toCanvas(msg, this.QRCodeMsg, opts, function (error) {
                })
            })
        },
        query () {
            this.$axios.get('http://127.0.0.1:8082/Alipay/query',{
                params: {
                    id: this.id
                }
            }).then(res =>{
                console.log(res.data.obj)
            })
        }
    }
}
</script>

<style>

</style>